<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>easyui 演示</title>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/easyui/themes/icon.css">
    <script type="text/javascript" src="${request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<script>
    // 新增Tab
    function openTab(text,url){
        //选择到 ID=tabs 对象，实际是 easyui-tabs
        if($("#tabs").tabs('exists',text)){
            //如果tab已经存在，变为选中
            $("#tabs").tabs('select',text);
        }else{
            //如果tab不存在，新增一个
            var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
            $("#tabs").tabs('add',{
                title:text,
                closable:true,
                content:content
            });
        }
    }
    // 公共方法
    var gridObj;//数据表格对象
    var windowObj;//对话框对象
    var btn_save = {id : 'btn_save',text : '保存',iconCls : 'icon-save',handler : function() {windowObj.find('iframe')[0].contentWindow.doSave();}};
    var btn_close = {id : 'btn_close',text : '关闭',iconCls : 'icon-cancel',handler : function() {windowObj.dialog('close');}};
    // 封装模态对话框
    function modalwindow(url,gObj,options,scroll){
        gridObj = gObj;//数据表格对象
        //创建一个新的层，其实是对话框
        windowObj = $('<div/>');//对话框对象
        //使用 jQuery 的继承方法，即可以设置对话框默认属性，同时也可以自定义属性
        var opts = $.extend({title : '&nbsp;',width : 640,height : 480,	resizable:true,
            onClose : function() {
                $(this).dialog('destroy');
            },buttons: [btn_save, btn_close]}, options);
        opts.modal = true;// 强制此dialog为模式化，无视传递过来的modal参数
        var sc = 'no';// 默认无滚动条
        if(scroll) sc = scroll;
        if (url) {
            opts.content = '<iframe id="dialogFrame" scrolling="' + sc + '" src="' + url + '" width="100%" height="100%" allowTransparency="true" frameBorder="0" border="0"></iframe>';
        }
        return windowObj.dialog(opts);
    }
    function closemodalwindow(flag,data){
        //关闭对话框
        windowObj.dialog('close');
        //关闭对话框的同时刷新数据
        if(flag){gridObj.datagrid('reload');}
        //关闭对话框的同时提示信息
        if(data){messagershow(data);}
    }
    function messagershow(data) {
        $.messager.show({height:130,title: '提示',timeout:5000,msg: data});
    }
    function messageralert(data, icon) {
        var i = "info";
        if(icon) i = icon;
        $.messager.alert('提示', data, i);
    }
    function noselectedalert() {
        messageralert('请选择相关数据进行操作！', 'warning');
    }
</script>
<body style="margin:0">
<!--布局演示-->
<div class="easyui-layout" style="width:100%;height:100%;">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'south',split:true" style="height:30px;"></div>
    <div data-options="region:'east',split:true,collapsed:true" title="辅助" style="width:150px;"></div>
    <div data-options="region:'west',split:true" title="菜单" style="width:150px;">
        <!--菜单演示-->
        <div class="easyui-accordion" fit="true" border="false">
            <div title="我的工作" data-options="iconCls:'icon-search'" style="padding:10px;">
                <p><a href="javascript:openTab('公共通讯录', 'xadmin/system/publicinfo')">公共通讯录</a></p>
            </div>
            <div title="系统管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                <p><a href="javascript:openTab('权限管理', 'xadmin/system/qxmanage')">权限管理</a></p>
                <p><a href="javascript:openTab('用户管理', 'xadmin/system/usermanage')">用户管理</a></p>
            </div>
            <div title="帮助" data-options="iconCls:'icon-help'" style="padding:10px;">
                <p><a href="javascript:openTab('帮助', 'http://www.baidu.com')">帮助</a></p>
            </div>
        </div>
    </div>
    <div data-options="region:'center',title:'主区域标题',iconCls:'icon-ok'">
        <!--选项卡-->
        <div class="easyui-tabs" fit="true" id="tabs">
            <div title="桌面（不能关闭）" style="padding:10px">
                <p style="font-size:14px">jQuery EasyUI框架能够让你轻松构建Web页面.</p>
                <ul>
                    <li>easyui是一套基于JQuery的用户界面插件集合.</li>
                    <li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>
                    <li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>
                    <li>完美支持HTML5.</li>
                    <li>easyui能够有效地节省你的开发时间.</li>
                    <li>easyui很简单但是很强大.</li>
                </ul>
            </div>
            <div title="数据表格" style="padding:10px">
                <!--表格组件-->
                <table class="easyui-datagrid" fit="true" title="基本数据表格" style="width:700px;height:250px"
                       data-options="singleSelect:true,collapsible:true,url:'/datagrid_data1.json',method:'get'">
                    <thead>
                    <tr>
                        <th data-options="field:'productid',width:80">产品编号</th>
                        <th data-options="field:'productname',width:100">产品名称</th>
                        <th data-options="field:'unitcost',width:80,align:'right'">市场价</th>
                        <th data-options="field:'status',width:60,align:'right'">状态</th>
                        <th data-options="field:'listprice',width:80">成本价</th>
                        <th data-options="field:'attr1',width:250,align:'center'">描述</th>
                        <th data-options="field:'itemid',width:60,align:'center'">分类</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div title="树形结构" style="padding:10px">
                <!--树形组件-->
                <ul class="easyui-tree" data-options="url:'/tree_data1.json',method:'get',animate:true"></ul>
            </div>
            <div title="帮助（可关闭）" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
                <p>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
                    <a href="#" class="easyui-linkbutton" data-options="plain:true, iconCls:'icon-save'">保存</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">剪切</a>
                    <a href="#" class="easyui-linkbutton">文本按钮</a>

                </p>
                <p>
                <div style="margin:10px 0;">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">打开</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>
                </div>
                <div id="dlg" class="easyui-dialog" title="基本对话框" data-options="iconCls:'icon-save', closed:'true'" style="width:400px;height:200px;padding:10px">
                    对话窗体内容。
                </div>

                </p>
                <p>
                    <script>
                        function show(){
                            $.messager.show({
                                title:'我的标题',
                                msg:'消息4秒后自动关闭.',
                                showType:'show'
                            });
                        }
                        function alert1(){
                            $.messager.alert('我的标题','这是一个消息!');
                        }
                        function confirm1(){
                            $.messager.confirm('我的标题', '确认吗?', function(r){
                                if (r){
                                    alert('确认: '+r);
                                }
                            });
                        }
                    </script>
                    <a href="#" class="easyui-linkbutton" onclick="show()">普通消息显示</a>
                    <a href="#" class="easyui-linkbutton" onclick="alert1()">提醒消息</a>
                    <a href="#" class="easyui-linkbutton" onclick="confirm1();">确认消息框</a>

                </p>
                这是帮助内容.
            </div>
        </div>
    </div>
</div>

</body>
</html>
